<template>
  <div class="home-container">
    <ul class="header-bar flex justify-end">
      <li v-if="!isLogin" class="nav-item">
        <router-link class="nav-item-link link flex align-center justify-center" :to="{ name: 'login' }">
          登录
        </router-link>
      </li>
      <li v-if="!isLogin" class="nav-item">
        <router-link class="nav-item-link link flex align-center justify-center" :to="{ name: 'register' }">
          注册
        </router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-item-link link flex align-center justify-center" :to="{ name: 'projects' }">
          我的项目
        </router-link>
      </li>
      <li v-if="isLogin" class="nav-item">
        <a class="nav-item-link link flex align-center justify-center" href="javascript:void(0);" @click="logout">
          注销登录
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-item-link link flex align-center justify-center"
          href="https://gitee.com/liaohui5/docs-manager"
          target="_blank"
        >
          Gitee
        </a>
      </li>
    </ul>
    <el-carousel height="100vh">
      <el-carousel-item
        v-for="item in tips"
        :key="item.id"
        :style="{ background: `linear-gradient(to right, ${item.bgColors[0]}, ${item.bgColors[1]})` }"
      >
        <div class="item-wrapper">
          <h3 class="item-title">{{ item.title }}</h3>
          <p class="item-desc">{{ item.desc }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { carousels } from "../../api/home";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "home",
  data: () => ({
    // TODO: 需要增加一个表存放首页tips和首页连接
    // TODO: 一期做完需要优化SEO,让每页的title不一样
    tips: [],
  }),

  created() {
    this.getCarousels();
  },

  computed: {
    ...mapGetters("user", ["isLogin"]),
  },

  methods: {
    ...mapMutations("user", ["logout"]),

    async getCarousels() {
      const res = await carousels();
      if (res.success) {
        res.data.forEach((item) => (item.bgColors = JSON.parse(item.bgColors)));
        this.tips = res.data;
        return;
      }
      this.$message.error(res.msg);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  .header-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    z-index: 10;
    width: 100%;
    padding: 0 20px;
    list-style: none;
    // flex-direction: row-reverse;
    box-sizing: border-box;
    .nav-item {
      width: 100px;
      height: 100%;
      list-style: none;
      &-link {
        width: 100%;
        color: #f8f8f8;
      }
    }
  }

  .item-wrapper {
    width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
    .item-title,
    .item-desc {
      text-align: center;
      color: #fff;
    }
    .item-title {
      font-size: 30px;
      margin: 25px 0;
      font-weight: bold;
    }
    .item-desc {
      font-size: 25px;
      line-height: 1.5;
    }
  }
}
</style>
